<template>
  <div>
    <header>
      <div class="banxin header_in tanxin">
        <h2>TodoList</h2>
        <input
          type="text"
          placeholder="添加ToDo"
          v-model="inputvalue"
          @keyup.13="iptKeyup"
        />
      </div>
    </header>
    <div class="list banxin">
      <my-list
        title="正在进行"
        :arr="goingArr"
        @chxfn="chxfn"
        @cunchu="cunchu"
      ></my-list>
      <my-list
        title="已经完成"
        :arr="doneArr"
        @chxfn="chxfn"
        @cunchu="cunchu"
      ></my-list>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import MyList from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  data() {
    return {
      // 正在进行数组
      goingArr: [],
      // 已经完成数组
      doneArr: [],
      // 输入框的值
      inputvalue: "",
    };
  },
  methods: {
    // 被子组件失焦所触发的函数
    cunchu() {
      localStorage.setItem("goingArr", JSON.stringify(this.goingArr));
      localStorage.setItem("doneArr", JSON.stringify(this.doneArr));
    },
    // 输入框回车事件
    iptKeyup() {
      // 为了保证id的唯一性，选用时间戳作为id
      let obj = {
        id: new Date().getTime(),
        content: this.inputvalue,
        ifinput: false,
      };
      this.goingArr.push(obj);
      // 当数组修改完毕之后，需要存起来 - 引用数据类型需要序列化 JSON.stringify   (反序列化 JSON.parse)
      localStorage.setItem("goingArr", JSON.stringify(this.goingArr));
      this.inputvalue = ""; // 清空输入框的值
    },
    // 被子组件点击了复选框从而触发的函数
    chxfn(index, title) {
      // 正在进行数组goingArr，要删的是index项，把index项push到doneArr
      if (title === "正在进行") {
        let obj = this.goingArr[index];
        this.goingArr.splice(index, 1);
        this.doneArr.push(obj);
      } else {
        let obj = this.doneArr[index];
        this.doneArr.splice(index, 1);
        this.goingArr.push(obj);
      }
      // 存储localStorage
      this.cunchu();
    },
  },
  components: {
    MyList,
  },
  // 组件在哪个生命周期获取数据(做请求)
  created() {
    // 反序列化，重新修改goingArr
    this.goingArr = JSON.parse(localStorage.getItem("goingArr") || "[]");
    this.doneArr = JSON.parse(localStorage.getItem("doneArr") || "[]");
  },
};
</script>

<style scoped>
.header_in {
  height: 50px;
}
header {
  height: 50px;
  background: #333;
}
header h2 {
  color: #fff;
}
header input {
  width: 300px;
  height: 30px;
  background: #fff;
  outline: none;
  border-radius: 5px;
  text-indent: 1em;
}
</style>